<template>
    <div class="div" @wheel="scroll">
        <fButton @click="show = true">打开弹窗</fButton>
        <fDialog v-model="show" title="这是第一层弹窗" @open="open" @opened="opened" @close="close" @closed="closed">
            这是第一层弹窗
            <template #footer>
                <fButton @click="show = false">取消</fButton>
                <fButton type="primary">确定</fButton>
            </template>
        </fDialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false)

const scroll = () => {
    console.log("父组件scroll");
}

const open = () => {
    console.log("父组件open--打开的回调");
}

const opened = () => {
    console.log("父组件opened--打开动画结束时的回调");
}

const close = () => {
    console.log("父组件close--关闭的回调");
}

const closed = () => {
    console.log("父组件closed--关闭动画结束时的回调");
}

</script>

<style scoped>
.div {
    height: 2000px;
}
</style>